﻿

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>异步更新队列</title>
		
		<script src="vue.js">
<script type="text/javascript">
<!--
	
//-->
</script>		

    </head>
    <body class="docs"> 

<div id="example">
  <p>{{ message }}</p>
  
</div>
	
    </body>
	
<script type="text/javascript">
<!--
	
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('created -> message is: ' + this.message)
  },
  mounted: function () {
    // `this` 指向 vm 实例
    console.log('mounted -> message is: ' + this.message)
  },
  updated: function () {
    // `this` 指向 vm 实例
    console.log('updated -> message is: ' + this.message)
  }
})
console.log(vm.message);
vm.message = 'new message' // 更改数据

console.log(vm.message);
console.log(vm.$el.textContent);

vm.$el.textContent === 'new message' // false
console.log(vm.$el.textContent === 'new message');

console.log('异步更新队列 绑定后');
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
	console.log('-------');
	console.log(vm.$el.textContent === 'new message');
	console.log(vm.$el.textContent);
	console.log('-------');
	
})
setTimeout(function (){
	console.log(vm.$el.textContent);
	console.log(vm.message);
	},2000);
</script>
	
</html>
